<script setup lang="ts">
import { ref } from 'vue'

const propsData = defineProps({
  id: String,
  name: String,
  size: String,
  extension: String,
  url: String,
  hash: String,
  fileName: String,
  isCollection: Boolean,
  isSelected: Boolean,
})

const selected = ref(true)

const emit = defineEmits([
  'update:id',
  'update:name',
  'update:size',
  'update:extension',
  'update:isCollection',
  'update:isSelected',
])

const updateProp = (propName, hash, value) => {
  emit(
    `update:${propName}` as
      | 'update:id'
      | 'update:name'
      | 'update:size'
      | 'update:extension'
      | 'update:isCollection'
      | 'update:isSelected',
    {
      hash: hash,
      value: value,
    },
  )
}

function showTooltip(message: string | undefined) {
  if (!message) return false
  return message.length > 57
}
</script>

<template>
  <v-hover>
    <template v-slot:default="{ isHovering, props }">
      <v-list-item
        v-bind="props"
        style="padding-left: 20px; margin-top: 5px"
        :elevation="isHovering ? 3 : 0"
      >
        <template v-slot:prepend>
          <v-icon
            v-if="propsData.isCollection"
            color="primary"
            size="24"
            style="margin-right: 10px"
          >
            mdi-folder
          </v-icon>
          <v-icon v-else color="primary" size="24" style="margin-right: 10px">
            mdi-video
          </v-icon>
        </template>
        <v-list-item-title class="text-overflow">
          {{ propsData.name }}
          <v-tooltip
            activator="parent"
            v-if="showTooltip(propsData.name)"
            location="top"
          >
            {{ propsData.name }}}
          </v-tooltip>
        </v-list-item-title>

        <v-list-item-subtitle>
          {{ propsData.size }} {{ propsData.fileName }}
          {{ propsData.extension }}
        </v-list-item-subtitle>

        <template v-slot:append>
          <v-checkbox-btn
            v-model="selected"
            @change="updateProp('isSelected', propsData.hash, selected)"
          ></v-checkbox-btn>
        </template>
      </v-list-item>
    </template>
  </v-hover>
</template>

<style scoped>
.text-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
